<template>
    <view class="kind">
        <view class="kind-content">
            <view class="select-kind">
                <view class="title">
                    <view class="item">门：</view>
                    <view class="item">纲：</view>
                    <view class="item">科：</view>
                    <view class="item">属：</view>
                </view>
                <u-tag class="tag-item" v-for="(item, index) in selectResult" :key="index" :text="item.label" @click="selectKind(index)"
                    mode="light" />
                <u-button type="primary" size="mini" @click="queryPlant">查看</u-button>
            </view>
            <!-- <u-select v-model="show" mode="mutil-column" :safe-area-inset-bottom="true" :list="list" :default-value="defaultSelect"
                    @confirm="confirm"></u-select> -->
            <u-select v-model="doorRes" mode="single-column" :list="door" :default-value="defaultSelect[0]" @confirm="confirm($event, 0)"></u-select>
            <u-select v-model="outlineRes" mode="single-column" :list="outline" :default-value="defaultSelect[1]" @confirm="confirm($event, 1)"></u-select>
            <u-select v-model="sectionRes" mode="single-column" :list="section" :default-value="defaultSelect[2]" @confirm="confirm($event, 2)"></u-select>
            <u-select v-model="genusRes" mode="single-column" :list="genus" :default-value="defaultSelect[3]" @confirm="confirm($event, 3)"></u-select>
        </view>
        <u-gap height="4" bg-color="#d4d4d4"></u-gap>
        <plantList v-if="plantList.length > 0" :listData="plantList"></plantList>
        <u-empty v-else text="内容为空" mode="list" margin-top="250"></u-empty>
        <view class="more" v-if="bottomLoading && !noMore">
            <u-loading mode="flower"></u-loading>加载中...
        </view>
        <view class="noMore" v-if="noMore">没有更多了</view>
        <bottomTabBar></bottomTabBar>
    </view>
</template>

<script>
    import {
        mapState
    } from 'vuex';
    import bottomTabBar from '@/components/bottom-tabbar.vue';
    import plantList from '@/components/plant-list.vue';
    import api from '@/common/api.js';
    import {loading, successToast, clearLoad} from '@/common/global.js';
    export default {
        components: {
            bottomTabBar,
            plantList
        },
        data() {
            return {
                show: false,
                door: [],
                outline: [],
                section: [],
                genus: [],
                doorRes: false,
                outlineRes: false,
                sectionRes: false,
                genusRes: false,
                selectResult: [{ // tag标签
                    label: '选择'
                }, {
                    label: '选择'
                }, {
                    label: '选择'
                }, {
                    label: '选择'
                }], // 结果集合
                defaultSelect: [
                    [0],
                    [0],
                    [0],
                    [0]
                ], // 默认选中集合
                reqKind: null, // 选择的最终结果
                pageNum: 1,
                plantList: [], // 植物数据
                noMore: false,
                plantListTotal: 0, // 数据总数
                kindParam: []
            }
        },
        computed: {
            ...mapState({
                bottomLoading: state => state.bottomLoading
            })
        },
        methods: {
            /**
             * 选择分类
             * */
            confirm(e, index) {
                let param = e[0].value;
                if (!param) {
                    return;
                }
                if (e[0].label === '全部') {
                    if (!this.reqKind) {
                        this.reqKind = 'all';
                    }
                } else {
                    this.reqKind = e[0].value;
                }
                this.selectResult[index] = e[0];
                for (var i = index + 1; i < this.selectResult.length; i++) {
                    this.selectResult[i] = {
                        label: '选择'
                    };
                }
                switch (index) {
                    case 0:
                        var all = {
                            label: '全部',
                            value: 'outline'
                        }
                        if (param === 'doors') {
                            let door = this.door.slice(1);
                            if (door.length <= 0) {
                                return;
                            }
                            let reqArr = [];
                            for (var k in door) {
                                reqArr.push(door[k].value);
                            }
                            this.outlineReq(reqArr, res => {
                                if (res.status === 0 && res.data.length > 0) {
                                    this.outline = [all, ...this.kindDataFormat(res.data,
                                        'outlineId', 'olCNName')]
                                }
                            })
                        } else {
                            this.outlineReq([param], res => {
                                if (res.status === 0 && res.data.length > 0) {
                                    this.outline = [all, ...this.kindDataFormat(res.data,
                                        'outlineId', 'olCNName')]
                                }
                            })
                        }
                        this.defaultSelect[index] = this.defaultSel(this.door, param)
                        break;
                    case 1:
                        var all = {
                            label: '全部',
                            value: 'section'
                        }
                        if (param === 'outline') {
                            let outline = this.outline.slice(1);
                            if (outline.length <= 0) {
                                return;
                            }
                            let reqArr = [];
                            for (var k in outline) {
                                reqArr.push(outline[k].value);
                            }
                            this.sectionReq(reqArr, res => {
                                if (res.status === 0 && res.data.length > 0) {
                                    this.section = [all, ...this.kindDataFormat(res.data,
                                        'sectionId', 'secCNName')]
                                }
                            })
                        } else {
                            this.sectionReq([param], res => {
                                if (res.status === 0 && res.data.length > 0) {
                                    this.section = [all, ...this.kindDataFormat(res.data,
                                        'sectionId', 'secCNName')]
                                }
                            })
                        }
                        this.defaultSelect[index] = this.defaultSel(this.outline, param)
                        break;
                    case 2:
                        var all = {
                            label: '全部',
                            value: 'genus'
                        }
                        if (param === 'section') {
                            let section = this.section.slice(1);
                            if (section.length <= 0) {
                                return;
                            }
                            let reqArr = [];
                            for (var k in section) {
                                reqArr.push(section[k].value);
                            }
                            this.genusReq(reqArr, res => {
                                if (res.status === 0 && res.data.length > 0) {
                                    this.genus = [all, ...this.kindDataFormat(res.data, 'genusId',
                                        'genusCNName')]
                                    console.log('属', this.genus)
                                }
                            })
                        } else {
                            this.genusReq([param], res => {
                                if (res.status === 0 && res.data.length > 0) {
                                    this.genus = [all, ...this.kindDataFormat(res.data, 'genusId',
                                        'genusCNName')]
                                }
                            })
                        }
                        this.defaultSelect[index] = this.defaultSel(this.section, param)
                        break;
                    case 3:
                        this.defaultSelect[index] = this.defaultSel(this.genus, param)
                        break;
                }
                console.log(this.selectResult)
            },
            /**
             * 设置默认
             * */
            defaultSel(data, value) {
                for (var k in data) {
                    if (data[k].value === value) {
                        return [parseInt(k)];
                    }
                }
            },
            /**
             * 选择分类
             * */
            selectKind(index) {
                switch (index) {
                    case 0:
                        this.doorRes = true;
                        break;
                    case 1:
                        this.outlineRes = true;
                        break;
                    case 2:
                        this.sectionRes = true;
                        break;
                    case 3:
                        this.genusRes = true;
                        break;
                }
            },
            /**
             * 请求门
             * */
            doorReq(cb) {
                api.getDoor({}, res => {
                    cb && cb(res.data);
                });
            },
            /**
             * 请求纲
             * */
            outlineReq(doorId, cb) {
                console.log('doorId', doorId)
                let params = {
                    doorId: JSON.stringify(doorId)
                }
                api.getOutline(params, res => {
                    cb && cb(res.data);
                })
            },
            /**
             * 请求科
             * */
            sectionReq(outlineId, cb) {
                let params = {
                    outlineId: JSON.stringify(outlineId)
                }
                api.getSection(params, res => {
                    cb && cb(res.data);
                })
            },
            /**
             * 请求属
             * */
            genusReq(sectionId, cb) {
                let params = {
                    sectionId: JSON.stringify(sectionId)
                }
                api.getGenus(params, res => {
                    cb && cb(res.data);
                })
            },
            /**
             * 请求全部植物
             * */
            plantAllReq(pageNum, cb) {
                let params = {
                    pageNum: pageNum,
                    pageSize: 10
                }
                api.getPlantAll(params, res => {
                    if(res.data.status === 0) {
                        this.plantList = [...this.plantList, ...res.data.data];
                        this.plantListTotal = res.data.total;
                        this.pageNum++;
                        cb && cb();
                    }
                })
            },
            /**
             * 根据条件请求植物数据
             * */
            plantConditionReq(pageNum, arr, cb) {
                let kind = ['doorId', 'outlineId', 'sectionId', 'genusId']
                let params = {
                    pageNum: pageNum,
                    pageSize: 10
                }
                for (var k in arr) {
                    if (arr[k]) {
                        params[kind[k]] = arr[k]
                    }
                }
                api.getPlantCondition(params, res => {
                    this.plantList = [...this.plantList, ...res.data.data];
                    this.plantListTotal = res.data.total;
                    this.pageNum++;
                    cb && cb();
                })
            },
            /**
             * 加载植物数据
             * */
            loadPlantData(arr, cb) {
                if (this.reqKind === 'all') {
                    this.plantAllReq(this.pageNum, cb)
                } else {
                    // 获取植物根据条件
                    this.plantConditionReq(this.pageNum, arr, cb)
                }
            },
            /**
             * 处理分类数据
             * */
            kindDataFormat(json, label, value) {
                let temp = [];
                for (var k in json) {
                    var obj = {
                        value: json[k][label],
                        label: json[k][value]
                    }
                    temp.push(obj);
                }
                return temp;
            },
            /**
             * 按照分类查看
             * */
            queryPlant() {
                loading('正在获取中...');
                let result = this.selectResult;
                for (var k in result) {
                    if (result[k].label === '选择' || result[k].label === '全部') {
                        this.kindParam[k] = undefined;
                    } else {
                        this.kindParam[k] = result[k].value;
                    }
                }
                this.pageNum = 1;
                this.plantList = [];
                this.loadPlantData(this.kindParam, res => {
                    clearLoad();
                    successToast('获取数据完成');
                })
            }
        },
        onReachBottom() {
            if (this.plantList.length >= this.plantListTotal) {
                this.noMore = true;
                return;
            }
            this.$updateParams(['bottomLoading', true])
            this.loadPlantData(this.kindParam, () => {
                this.$updateParams(['bottomLoading', false])
            });
        },
        created() {
            this.doorReq(res => {
                if (res.status === 0) {
                    this.door = [{
                            label: '全部',
                            value: 'doors'
                        },
                        ...this.kindDataFormat(res.data, 'doorId', 'dCNName')
                    ]
                }
            });
        }
    }
</script>

<style lang="less" scoped>
    .kind {
        padding: 10rpx;
        
        .kind-content {
            background: #fff;
            padding: 15rpx 15rpx 30rpx 15rpx;
            
            .title {
                display: flex;
            
                .item {
                    margin: 15rpx 34rpx 15rpx 28rpx;
                }
            }
            
            .select-kind {
                margin: 15rpx 0;
            
                .tag-item {
                    margin-right: 20rpx;
                }
            }
        }
        
    }
</style>
